<template>
    <div>
        <div>
            <!--        简单搜索-->
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input style="width: 300px;margin-right: 10px"
                              prefix-icon="el-icon-search"
                              v-model="empName"
                              @keydown.enter.native="initEmps"
                              clearable
                              @clear="initEmps"
                              :disabled="showAdvanceSearchVisible"
                              placeholder="请输入员工名进行搜索..."></el-input>
                    <el-input style="width: 300px;margin-right: 10px"
                              prefix-icon="el-icon-search"
                              v-model="empId"
                              @keydown.enter.native="initEmps"
                              clearable
                              @clear="initEmps"
                              :disabled="showAdvanceSearchVisible"
                              placeholder="请输入员工id进行搜索..."></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="initEmps"
                               :disabled="showAdvanceSearchVisible">搜索
                    </el-button>
                    <el-button type="primary" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">
                        <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                           aria-hidden="true"></i>
                        高级搜索
                    </el-button>
                </div>
                <div>
<!--                    <el-upload-->
<!--                            style="display: inline-flex;margin-right: 8px"-->
<!--                            :headers="headers"-->
<!--                            :show-file-list="false"-->
<!--                            :before-upload="beforeUpload"-->
<!--                            :on-success="onSuccess"-->
<!--                            :on-error="onError"-->
<!--                            :disbaled="importDataDisabled"-->
<!--                            action="/employeeEc/basic/import">-->
<!--                        <el-button type="success" :icon="importDataBtnIcon" :disabled="importDataDisabled">-->
<!--                            {{importDataBtnText}}-->
<!--                        </el-button>-->
<!--                    </el-upload>-->
<!--                    <el-button @click="exportData" type="success" icon="el-icon-download">-->
<!--                        导出数据-->
<!--                    </el-button>-->
                    <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
                </div>
            </div>
        </div>
            <!--        高级搜索-->
        <transition name="slide-fade">
            <div v-show="showAdvanceSearchVisible"
                 style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
                <el-row>
                    <el-col :span="7">
                        奖罚类别:
                        <el-radio-group v-model="searchValue.ecType">
                            <el-radio v-model="radio" label="0" >奖励</el-radio>
                            <el-radio v-model="radio" label="1" >惩罚</el-radio>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="10">
                        奖罚日期:
                        <el-date-picker
                                v-model="searchValue.beginDateScope"
                                size="mini"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="30">
                        <el-button size="mini" @click="initEmps('quit')">取消</el-button>
                        <el-button @click="initEmps('advanced')" size="mini" icon="el-icon-search" type="primary">搜索
                        </el-button>
                    </el-col>
                </el-row>
            </div>
        </transition>
            <!--        数据表格列字段-->
        <div style="margin-top: 10px">
            <el-table
                    :data="emps"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        fixed
                        align="center"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="eid"
                        label="工号"
                        align="center"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="ecDate"
                        label="奖罚日期"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="ecReason"
                        label="奖罚原因"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="ecPoint"
                        label="奖罚分"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="ecType"
                        label="奖罚类别"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="操作"
                        fixed="right"
                        align="center"
                        width="200">
                    <template slot-scope="scope">
                        <el-button @click="showEditEmpView(scope.row)" style="padding: 3px" size="mini">编辑</el-button>
<!--                        <el-button style="padding: 3px" size="mini" type="primary">查看高级资料</el-button>-->
                        <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
                <!--            分页栏-->
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        background
                        :hide-on-single-page="isValue"
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes,prev, pager, next, jumper, ->, total"
                        :total="total">
                </el-pagination>
            </div>
        </div>
            <!--        员工奖惩添加信息框-->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <el-form ref="empForm" :model="empEc" :rules="rules">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="姓名：" prop="name">
                                <el-input size="mini" prefix-icon="el-icon-edit" style="width: 150px;"
                                          v-model="empEc.name" placeholder="请输入员工姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="奖惩日期：" prop="ecDate">
                                <el-date-picker
                                        v-model="empEc.ecDate"
                                        type="date"
                                        size="mini"
                                        style="width: 150px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="出生日期">
                                </el-date-picker>
                            </el-form-item>

                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="奖罚分：" prop="ecPoint">
                                <el-input v-model="empEc.ecPoint" placeholder="奖罚分" prefix-icon="el-icon-edit"
                                          size="mini" style="width: 200px"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="50">
                        <el-col :span="7">
                            <el-form-item label="奖惩原因：" prop="ecReason">
                                <el-input type="textarea" :rows="3" v-model="empEc.ecReason" placeholder="请输入奖惩原因" prefix-icon="el-icon-edit"
                                          size="mini" style="width: 500px"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="7">
                            <el-form-item label="备注：" prop="remark">
                                <el-input type="textarea" :rows="3" v-model="empEc.remark" placeholder="请输入备注"
                                          size="mini" style="width: 500px" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="工号：" prop="eid">
                                <el-input v-model="empEc.eid" placeholder="请输入工号" prefix-icon="el-icon-edit"
                                          size="mini" style="width: 150px"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="奖惩类别：" prop="ecType">
                                <el-radio-group v-model="empEc.ecType" style="margin-top: 8px">
                                    <el-radio v-model="radio" label="0">奖励</el-radio>
                                    <el-radio v-model="radio" label="1">惩罚</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fuzhi">赋值</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddEmp">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        name: "PerEc",
        data() {
            return {
                searchValue: {
                    //类别
                    ecType: '',
                    //日期范围
                    beginDateScope: null
                },
                showAdvanceSearchVisible: false,
                headers: {
                    Authorization: window.sessionStorage.getItem('tokenStr')
                },
                importDataDisabled: false,
                importDataBtnText: '导入数据',
                importDataBtnIcon: 'el-icon-upload2',
                title: '',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                visible: false,
                visible2: false,
                emps: [],
                // 当只有一页时隐藏分页
                isValue: false,
                //加载
                loading: false,
                // 总计
                total: 0,
                //当前页
                currentPage: 1,
                //尺寸
                size: 10,
                //员工姓名
                empName: '',
                //员工id
                empId:'',
                //对话框状态
                dialogVisible: false,
                //单选框
                radio:'',
                politicsstatus: [],
                positions: [],
                empEc: {
                    id: null,
                    eid: null,
                    name: '',
                    ecDate: '',
                    ecPoint: '',
                    ecReason:'',
                    remark:'',
                    ecType: '',
                },
                rules: {
                    eid: [{required: true, message: '请输入工号', trigger: 'blur'}],
                    name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
                    ecDate: [{required: true, message: '请输入奖惩日期', trigger: 'blur'}],
                    ecPoint: [{required: true, message: '请输入专业', trigger: 'blur'}],
                    ecReason: [{required: true, message: '请输入奖惩原因', trigger: 'blur'}],
                    ecType: [{required: true, message: '请输入奖惩类型', trigger: 'blur'}],
                }
            }
        },
        mounted() {
            this.initEmps();
            this.initData();
        },
        methods: {
            onSuccess() {
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText = '导入数据';
                this.importDataDisabled = false;
                this.initEmps();
            },
            onError() {
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText = '导入数据';
                this.importDataDisabled = false;
            },
            beforeUpload() {
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataBtnText = '正在导入';
                this.importDataDisabled = true;
            },
            exportData() {
                this.downloadRequest('/employeeEc/basic/export');
            },
            showEditEmpView(data) {
                this.title = '编辑员工信息';
                this.empEc = data;
                this.dialogVisible = true;
            },
            //员工奖惩删除
            deleteEmp(data) {
                this.$confirm('此操作将永久删除 ' + data.name + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/employeeEc/basic/' , data).then(
                        resp=>{
                            if (resp){
                                this.initEmps();
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },fuzhi(){
                this.empEc.name='刘俊';
                this.empEc.eid=3;
                this.empEc.ecDate='2020-10-20';
                this.empEc.ecPoint=50;
                this.empEc.ecReason="很好";
                this.empEc.ecType=1;
            },
            doAddEmp() {
                //存在ID为修改，否则添加
                if (this.empEc.id) {
                    this.$refs['empForm'].validate(valid => {
                        if (valid) {
                            //对应修改接口
                            this.postRequest('/employeeEc/basic/', this.empEc).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                } else {
                    this.$refs['empForm'].validate(valid => {
                        if (valid) {
                            //对应添加接口
                            this.putRequest('/employeeEc/basic/',this.empEc).then(
                                resp=>{
                                    if (resp){
                                        this.dialogVisible = false;
                                        this.initEmps();
                                    }
                                })
                        }
                    })
                }
            },
            searchHandleNodeClick(data) {
                this.searchValue.departmentId = data.id;
                this.visible2 = !this.visible2;
            },
            handleNodeClick(data) {
                this.empEc.departmentId = data.id;
                this.visible = !this.visible;
            },
            showDepView2() {
                this.visible2 = !this.visible2;
            },
            showDepView() {
                this.visible = !this.visible;
            },
            initData() {
            },
            //切换尺寸
            sizeChange(size) {
                this.size = size;
                this.initEmps();
            },
            //切换当前页
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.initEmps();
            },
            //添加员工奖惩窗口
            showAddEmpView() {
                this.title = '添加员工奖惩信息';
                this.empEc = {
                    id: null,
                    name: '',
                    ecDate: '',
                    ecPoint: '',
                    ecReason:'',
                    remark:'',
                    ecType: '',
                    eid: null
                };
                this.dialogVisible = true;
            },
            //分页查询接口
            initEmps(type) {
                this.loading = true;
                let url = '/employeeEc/basic/?currentPage=' + this.currentPage + '&size=' + this.size;
                if (type && type == 'advanced') {
                    //奖惩类别
                    if (this.searchValue.ecType) {
                        url += '&ecType=' + this.searchValue.ecType;
                    }
                    //日期范围
                    if (this.searchValue.beginDateScope) {
                        url += '&beginDateScope=' + this.searchValue.beginDateScope;
                    }
                } else {
                    //员工姓名
                    url += '&name=' + this.empName;
                    //员工号
                    url += '&eid=' + this.empId;
                }
                //重置搜索
                if (type=='quit')
                {
                    this.showAdvanceSearchVisible = !this.showAdvanceSearchVisible
                }
                //数据表格获取数据
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.emps = resp.data;
                        this.total = resp.total
                    }
                })
            }
        }
    }
</script>

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }
</style>